import React from 'react';
import ThemeItem from './Item';
import {Col, Row} from 'antd';
import {WeaSelect} from 'ecCom';
import classNames from 'classnames';
import ColorPicker from 'rc-color-picker';
import {fontFamilyOpts, fontSizeOpts} from "../../../../../../constants/theme";

const spaceOpts = [
  { key: '10px', selected: false, showname: '紧凑' },
  { key: '15px', selected: false, showname: '普通' },
  { key: '20px', selected: false, showname: '宽松' }
];

const scope = 'field.css';

export default class ThemeFieldSetting extends React.Component {
  formatFW = () => {
    const { fontWeight } = this.props.data.css;

    if('bold' === fontWeight) return 'normal';

    return 'bold';
  }

  render() {
    const { data, onChange } = this.props;
    const { fontFamily, fontSize, color, fontWeight } = data.css;
    const bold = 'bold' === fontWeight;

    return (
      <div>
        <h4>字段</h4>
        <ThemeItem label='字体样式'>
          <Row style={{ padding: 0 }}>
            <Col span={7}>
              <WeaSelect
                value={fontFamily}
                options={fontFamilyOpts}
                onChange={onChange(`${scope}.fontFamily`)}
              />
            </Col>
            <Col span={6} offset={1}>
              <WeaSelect
                value={fontSize}
                options={fontSizeOpts}
                onChange={onChange(`${scope}.fontSize`)}
              />
            </Col>
            <Col span={4} offset={1}>
              <span
                onClick={onChange(`${scope}.fontWeight`, this.formatFW)}
                className={classNames('btn-font-weight', { bold })}
              >
                B
              </span>
            </Col>
            <Col span={4} offset={1}>
              <ColorPicker
                color={color}
                onChange={onChange(`${scope}.color`)}
              />
            </Col>
          </Row>
        </ThemeItem>
        <ThemeItem label='间距'>
          <WeaSelect 
            value={data.space}
            options={spaceOpts}
            onChange={onChange('field.space')}
          />
        </ThemeItem>
      </div>
    )
  }
}